<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html>
<html>

<head>
<title>首页</title>
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="${ctx }/css/com.css">
<link rel="stylesheet" type="text/css" href="${ctx }/css/home_page.css">
<link href="${ctx}/css/framework/bootstrap.min.css" rel="stylesheet">
</head>

<body>
	<c:import url="nav.jsp"></c:import>
	<div id="pic">
		<div class="picture_carousel">
			<ul class="pictures">
				<c:forEach var="match" items="${matchPhotoList}">
					<li><a href="match.html?match_id=${match.match_id }"><img
							src="${match.cover}"> </a></li>
				</c:forEach>
				<c:forEach var="report" items="${reportPhotoList}">
					<li><a href="report.html?report_id=${report.report_id }"><img
							src="${report.cover }"> </a></li>
				</c:forEach>
			</ul>
			<ul class="switchable_nav"></ul>
		</div>
	</div>

	<div class="container main">

		<div class="col-md-8">
			<div class="panel panel-default">
				<div id="myCarousel" class="carousel slide">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
					</ol>
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner">
						<div class="item active">
							<img src="${ctx}/images/index/001.jpg" alt="First slide"
								width="650" height="300">
						</div>
						<div class="item">
							<img src="${ctx}/images/index/002.jpg" alt="Second slide"
								width="650" height="300">
						</div>
						<div class="item">
							<img src="${ctx}/images/index/003.jpg" alt="Third slide"
								width="650" height="300">
						</div>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<a class="carousel-control left" href="#myCarousel"
						data-slide="prev">&lsaquo;</a> <a class="carousel-control right"
						href="#myCarousel" data-slide="next">&rsaquo;</a>
					<!-- 控制按钮 -->
					<!-- 
						<div style="text-align: center;">
							<input type="button" class="btn start-slide" value="Start">
							<input type="button" class="btn pause-slide" value="Pause">
							<input type="button" class="btn prev-slide" value="Pre">
							<input type="button" class="btn next-slide" value="Next">
						</div> -->
				</div>
			</div>
			<script>
				$(function() {
					// 初始化轮播
					$(".start-slide").click(function() {
						$("#myCarousel").carousel('cycle');
					});
					// 停止轮播
					$(".pause-slide").click(function() {
						$("#myCarousel").carousel('pause');
					});
					// 循环轮播到上一个项目
					$(".prev-slide").click(function() {
						$("#myCarousel").carousel('prev');
					});
					// 循环轮播到下一个项目
					$(".next-slide").click(function() {
						$("#myCarousel").carousel('next');
					});
					// 循环轮播到某个特定的帧 
					$(".slide-one").click(function() {
						$("#myCarousel").carousel(0);
					});
					$(".slide-two").click(function() {
						$("#myCarousel").carousel(1);
					});
					$(".slide-three").click(function() {
						$("#myCarousel").carousel(2);
					});
				});
			</script>
		</div>

		<div class="col-md-4">

			<div class="panel panel-default">
				<div class="panel-heading">
					<最新赛事> <a href="match_list.html" class="more">更多</a>
				</div>
				<div class="panel-body">

					<ul class="section_list">
						<c:forEach var="match" items="${matchList }">
							<li class="list_item"><a
								href="match.html?match_id=${match.match_id }" class="item_title"
								title="查看详情">${match.match_name }</a><span class="time">${match.create_date }</span></li>
						</c:forEach>
					</ul>
				</div>
			</div>


			<div class="panel panel-default">
				<div class="panel-heading">
					<最新新闻> <a href="report_list.html" class="more">更多</a>
				</div>
				<div class="panel-body">
					<ul class="section_list">
						<c:forEach var="report" items="${reportList }">
							<li class="list_item"><a
								href="report.html?report_id=${report.report_id }"
								class="item_title">${report.report_name }</a><span class="time">${report.date }</span></li>
						</c:forEach>
					</ul>
				</div>

			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<最新新闻> <a href="report_list.html" class="more">更多</a>
				</div>
				<div class="panel-body">
					<ul class="section_list">
						<li class="list_item"><a
							href="report.html?report_id=${report.report_id }"
							class="item_title">关于第十四届“挑战杯”全国大学生... </a><span class="time">2016.01.13</span></li>
						<li class="list_item"><a
							href="report.html?report_id=${report.report_id }"
							class="item_title">关于第十四届“挑战杯”全国大学生... </a><span class="time">2016.01.13</span></li>
						<li class="list_item"><a
							href="report.html?report_id=${report.report_id }"
							class="item_title">关于第十四届“挑战杯”全国大学生... </a><span class="time">2016.01.13</span></li>
						<li class="list_item"><a
							href="report.html?report_id=${report.report_id }"
							class="item_title">关于第十四届“挑战杯”全国大学生... </a><span class="time">2016.01.13</span></li>
						<li class="list_item"><a
							href="report.html?report_id=${report.report_id }"
							class="item_title">关于第十四届“挑战杯”全国大学生... </a><span class="time">2016.01.13</span></li>
						<li class="list_item"><a
							href="report.html?report_id=${report.report_id }"
							class="item_title">关于第十四届“挑战杯”全国大学生... </a><span class="time">2016.01.13</span></li>
					</ul>
				</div>

			</div>

		</div>
	</div>

	<script src="${ctx }/js/framework/bootstrap.min.js"></script>
	<script src="${ctx }/js/jquery.min.js"></script>
	<script src="${ctx }/js/home_page.js"></script>
</body>

</html>